<!-- 盲盒 -->
<template>
    <view class="page zIndex" :style="{backgroundColor:configInfo.bjColor}">
        <!-- backgroundImage:'url(' + $imgUrls(configInfo.backImg) + ')' -->
        <image :src="$imgUrls(configInfo.backImg)" mode="widthFix" class="bgImg p-ab"></image>
        <Detailstop :fromShare="fromShare"></Detailstop>
        <image :src="$imgUrls(configInfo.img)" mode="widthFix" class="m-top80"></image>
        <view class="tearArea p-re">
            <swiper class="boxArea p-ab" circular>
                <swiper-item class="d-flex j-centert a-end" v-for="(item,index) in giftbox" :key="index">
                    <image :src="baseUrl + '/Uploads/diy/img/' + item" mode="widthFix" class="box" :class="{'opening':opening}"></image>
                </swiper-item>
            </swiper>
            <image class="plate p-ab" :src="baseUrl + '/Uploads/diy/img/baseplate.png'" mode="widthFix"></image>
            <view class="btn p-ab text-center size32 bold" @click="handleRaffle">拆它</view>
        </view>
        <view class="d-flex j-sb p-left70 p-right70 m-top50 m-bot70">
            <view class="largeBtn bor_radius_40 size30 bold text-center" @click="show = true">活动规则</view>
            <view class="largeBtn bor_radius_40 size30 bold text-center" @click="toUrl('/otherPage/lottery/prizeList?cid='+cid)">我的奖品</view>
        </view>
        <view class="winners p-left35 p-right35 p-bot70 d-flex f-column a-center">
            <view class="head bor_radius_30 p-left30 p-right30 d-flex j-sb a-center">
                <view class="dot bor_radius"></view>
                <view class="tit bor_radius_22 size28 white bold text-center">中奖名单</view>
                <view class="dot bor_radius"></view>
            </view>
            <view class="cont padding30-20">
                <swiper class="height" autoplay vertical circular disable-touch>
                    <swiper-item v-for="(arr,idx) in configInfo.winGroups" :key="idx">     
                        <view v-for="(item,index) in arr" :key="index" class="d-flex a-center m-bot20 h6">
                            <view class="d-flex a-center p-right10" style="width: 220rpx;">
                                <u-avatar :src="$imgUrls(item.v_headimg)" size="30"></u-avatar>
                                <text class="m-left10 ellipsis" v-if="item.v_name">{{ item.v_name }}</text>
                            </view>
                            <text class="flex-1 ellipsis">{{ item.title }}</text>
                            <text class="flex-1 text-right ellipsis">{{ item.addData }}</text>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <!-- 活动规则 -->
        <u-overlay :show="show" @click="show = false">
            <view class="flexac height">
			    <view class="details bor_radius_30s bgwhite p-re p-left40 p-right40 p-top70 p-bot70" @tap.stop>
                    <view class="title size42 white bold text-center p-ab">活动规则</view>
                    <view class="close p-ab" @click="show = false">
                        <u-icon name="close-circle" size="30" color="#fff"></u-icon>
                    </view>
                    <view class="cont">
                        <u-parse :content="configInfo.details" :domain="imgUrl" :scrollTable="true" :selectable="true" :useAnchor="true"></u-parse>
                    </view>
                </view>
		    </view>
        </u-overlay>
        <!-- 中奖提示 -->
        <u-overlay :show="showResult" @click="showResult = false">
            <view class="flexac height">
			    <view class="result bgwhite p-re d-flex f-column j-sb a-center p-top180 p-bot50" @tap.stop>
                    <image class="open p-ab" :src="baseUrl + '/Uploads/diy/img/openGift.png'" mode="widthFix"></image>
                    <view class="close p-ab" @click="showResult = false">
                        <u-icon name="close-circle" size="30" color="#fff"></u-icon>
                    </view>
                    <view class="size38 black bold" v-if="prizeData.type!=0">恭喜您中奖了!</view>
                    <view class="text-center" v-else>
                        <view class="size38 black bold m-bot20">很遗憾</view>
                        <view class="size38 black bold">您未中奖</view>
                    </view>
                    <view class="text-center" v-if="prizeData.type!=0">
                        <image :src="$imgUrls(prizeData.img)" mode="aspectFill" class="img m-bot10"></image>
                        <view class="size30 black bold500">{{ prizeData.title }}</view>
                    </view>
                    <view class="btn size38 white bold text-center" @click="showResult = false">我知道了</view>
                </view>
		    </view>
        </u-overlay>
        
        <showModel @cancelFunc='showModal=false' goHome='0' v-if='showModal' type='2'></showModel>
    </view>
</template>

<script>
import Detailstop from '../components/details/top.vue'
import {mapState} from 'vuex'
var that
export default {
    data(){
        return {
            baseUrl: this.baseUrl,
            imgUrl: this.imgUrl,
            configInfo: {},
            giftbox: ['giftbox1.png','giftbox2.png','giftbox3.png','giftbox4.png','giftbox5.png','giftbox6.png'],
            show: false, // 活动规则
            showResult: false, // 中奖提示
            prizeData: {},
            opening: false,
            cid: '', // 活动id
            showModal: false,
            fromShare: 0
        }
    },
    computed:{
		...mapState(['bid','vid','share'])
	},
    components: {
        Detailstop
    },
    onLoad(e){
        that = this
        if(e.cid) that.cid = e.cid
        if(e.fromShare) that.fromShare = e.fromShare
        that.getConfigInfo()
    },
    methods: {
        getConfigInfo(){ // 获取配置信息
            that.$http.post({
                url: '/SRA_LuckDraw/config',
                data: {
                    VeriCode: that.bid,
                    cid: that.cid
                }
            }).then(res=>{
                if(res.code != 100) return that.$Toast(res.notice)
                that.configInfo = res.data
                // 对中奖名单进行分组
                that.configInfo.winGroups = []
                let all = that.configInfo.winningUser
                if(!all) return
                for(let i = 0; i < all.length; i += 6){
                    let group = all.slice(i, i + 6)
                    that.configInfo.winGroups.push(group)
                }
            })
        },
        handleRaffle(){ // 抽奖
            if (!that.vid) return that.showModal = true
            if(that.opening) return // 避免重复点击
            that.opening = true
            that.$http.post({
                url: '/SRA_LuckDraw/getPrize',
                data: {
                    VeriCode: that.bid,
                    cid: that.cid,
                    v_id: that.vid
                }
            }).then(res=>{
                if(res.code != 100){
                    that.opening = false
                    return that.$Toast(res.notice)
                }
                that.prizeData = res.data.prizeDate
                setTimeout(()=>{
                    that.opening = false
                    that.showResult = true
                },1000)
            })
        }
    },
    onShareAppMessage(){
        that.$addShareNum('games', that.cid, '1')
        return {
            title: that.configInfo.title,
            path: `/pages/index/index?share_v_id=${that.vid}&pageType=17&gid=blindBox&cid=${that.cid}`
        }
    },
    onShareTimeline(){
        that.$addShareNum('games', that.cid, '2')
        return {
            title: that.configInfo.title,
            query: `share_v_id=${that.vid}&cid=${that.cid}&fromShare=1`,
            imageUrl: that.$imgUrls(that.configInfo.img || that.share.imageUrl)
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    // background-repeat: no-repeat;
    // background-size: 100% auto;
    .bgImg {
        top: 0;
        left: 0;
        z-index: -10;
    }
}
.tearArea {
    width: 100%;
    height: 730rpx;
    .boxArea {
        width: 100%;
        height: calc(100% - 128rpx);
        left: 0;
        bottom: 128rpx;
        z-index: 20;
        .box {
            width: 410rpx;
        }
    }
    .plate {
        left: 0;
        bottom: 0;
        z-index: 10;
    }
    .btn {
        width: 272rpx;
        line-height: 66rpx;
        background: linear-gradient(0deg, #FFEAA0, #FDC71F);
        box-shadow: 0rpx 10rpx 0rpx 0rpx #FD6703;
        border-radius: 33rpx;
        left: 50%;
        margin-left: -136rpx;
        bottom: 52rpx;
        color: #DA6627;
        z-index: 20;
    }
}
.largeBtn {
    width: 268rpx;
    line-height: 80rpx;
    background: #FFF3F0;  
    box-shadow: 0rpx 6rpx 0rpx 0rpx rgba(133,28,4,0.15), 0rpx 5rpx 6rpx 0rpx #FFFFFF;
    color: #FB6C1E;
}
.winners {
    .head {
        width: 100%;
        height: 68rpx;
        background: #FBA876;
        .dot {
            width: 22rpx;
            height: 22rpx;
            background: #FFDE29;
        }
        .tit {
            width: 458rpx;
            line-height: 54rpx;
            background: rgba(245,75,45,0.66);
            box-shadow: 0rpx 1rpx 0rpx 0rpx rgba(255,255,255,0.3), 0rpx 1rpx 0rpx 0rpx rgba(7,0,2,0.3);
        }
    }
    .cont {
        width: 590rpx;
        height: 564rpx;
        background: #FEE8CF;
        box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(101,93,83,0.26);
        color: #DD1809;
        border-radius: 0 0 4rpx 4rpx;
    }
}
.details {
    width: 680rpx;
    box-shadow: 0rpx 16rpx 2rpx 0rpx #F55F3E;
    border: 15rpx solid #FEE1B2;
    .title {
        width: 396rpx;
        line-height: 66rpx;       
        background: #F95433; 
        border-radius: 43rpx;    
        border: 10rpx solid #FFECA0;       
        box-shadow: 1rpx 4rpx 18rpx 0rpx rgba(201,17,0,0.4);
        left: 50%;
        margin-left: -198rpx;
        top: -43rpx;
    }
    .close {
        left: 50%;
        margin-left: -30rpx;
        bottom: -120rpx;
    }
    .cont {
        min-height: 536rpx;
        max-height: calc(80vh - 140rpx);
        overflow-x: hidden;
        overflow-y: auto;
    }
}
.result {
    width: 594rpx;
    height: 640rpx;
    border-radius: 42rpx;
    .open {
        width: 424rpx;
        left: 50%;
        margin-left: -212rpx;
        top: -106rpx;
    }
    .close {
        left: 50%;
        margin-left: -30rpx;
        bottom: -90rpx;
    }
    .img {
        width: 140rpx;
        height: 140rpx;
    }
    .btn {
        width: 390rpx;
        line-height: 104rpx;     
        background: linear-gradient(90deg, #FF2929, #FF7F00);      
        border-radius: 52rpx;
    }
}
.opening {
    animation: swing 0.2s linear infinite alternate;
}
@keyframes swing {
    from { transform: rotate(-20deg) }
    to { transform: rotate(20deg) }
}
</style>